<!-- 单人头像，id，命名 -->
<template>
  <div class="singperson">
    <el-card :body-style="{ padding: '0px', margin: '10px' }" shadow="hover">
      <el-avatar :size="100" :src="avatar"></el-avatar>
      <div>
        <el-input
          @keyup.enter="changeName"
          type="text"
          class="rule-input-edit"
          v-model="name"
          @change="changeName"
        ></el-input>
      </div>

      <div style="padding: 10px">
        <div class="bottom clearfix">
          <el-button
            type="text"
            class="button"
            @click="$router.push({ path: '/home/person', query: { id: id } })"
            >查看</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
    
<script>
export default {
  props: {
    id: {
      required: true,
      type: String,
    },
    name: {
      required: true,
      type: String,
    },
    avatar: {
      required: true,
      type: String,
    },
  }, //分类信息元组
  data() {
    return {};
  },
  methods: {
    async changeName(value) {
      let formdata = new FormData();
      formdata.append("groupId", this.id);
      formdata.append("groupName", value);
      let res = await this.$post("/imgcenter/people/updateGroupName", formdata);
      if (res.success == true && res.message == "更新成功") {
        this.$notify({
          title: "修改成功",
          type: "success",
          duration: 2000,
        });
      } else {
        this.$notify({
          title: "失败",
          message: "修改失败,请咨询管理员",
          type: "error",
          duration: 2000,
        });
      }
    },
  },
};
</script>

<style lang="scss"  scoped>
.singperson {
  margin: 5px;
  width: 120px;
}

.bottom {
  margin-top: 2px;
  line-height: 12px;
}
.info {
  width: 80px;
  height: 10px;
  border: 0;
}
.button {
  padding: 0;
  float: center;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
.rule-input ::v-deep {
  .el-input__inner {
    border: 0;
  }
}
.rule-input-edit ::v-deep {
  width: 90px;
  .el-input__inner {
    border: 0;
    border-radius: 0px;
    &:focus {
      border-bottom: 1px solid #409eff;
    }
  }
}
.el-form-item {
  margin-bottom: 10px;
}
</style>
